<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.gooey {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 60px;
			height: 30px;
			transform: translate(-50%, -50%);
			-webkit-filter: url(#goo);
			filter: url(#goo);
		}

		.gooey:after,
		.gooey:before {
			content: "";
			position: absolute;
			display: block;
			background: #000;
			border-radius: 50%;
		}

		.gooey:before {
			margin: 3px;
			width: 24px;
			height: 24px;
			animation: leftGoo 2s ease infinite;
		}

		.gooey:after {
			width: 30px;
			height: 30px;
			margin-left: 30px;
			animation: rightGoo 2s ease infinite;
		}

		@keyframes leftGoo {
			50% {
				transform: translateX(30px);
			}
		}

		@keyframes rightGoo {
			50% {
				transform: translateX(-30px);
			}
		}

		.credit {
			position: fixed;
			right: 20px;
			bottom: 20px;
			text-decoration: none;
			font-size: 14px;
			letter-spacing: 0.04em;
			color: white;
			background: #C8CCD4;
			padding: 6px 18px;
			line-height: 1.5em;
			border-radius: 5px;
			transition: all 0.2s ease;
		}

		.credit:hover {
			text-decoration: none;
			background: #9098A9;
			color: white;
		}

		.credit.v2 {
			right: 120px;
		}
	</style>
	<body>
		<div class="gooey"></div>
		<svg xmlns="https://www.w3.org/2000/svg" version="1.1">
			<defs>
				<filter id="goo">
					<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
					<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
						result="goo" />
					<feBlend in="SourceGraphic" in2="goo" />
				</filter>
			</defs>
		</svg>
	</body>
</html>
